<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getDepressionTopics, getPrematureTopics, getInsomniaTopics } from '@/apis/apis.js'
const percent = ref(0)
const name = ref('')
const questions = ref([])
const answers = ref([])
const activeIndex = ref(0)
const handleAnswer = (item, nextIndex) => {
  setTimeout(() => {
    if (nextIndex === questions.value.length) {
      answers.value.push(item.son_id)
      const query = JSON.stringify({
        name: name.value,
        answers: answers.value
      })
      uni.navigateTo({ url: `/pages/self-test/result?query=${query}` })
      percent.value = 0
      answers.value = []
      activeIndex.value = 0
    }
    else {
      activeIndex.value = nextIndex
      percent.value = nextIndex / (questions.value.length - 1) * 100
      answers.value.push(item.son_id)
    }
  }, 400);
}
onLoad((option) => {
  name.value = option.name
  uni.setNavigationBarTitle({
    title: option.name
  }) 
})
onMounted(async () => {
  if (name.value === '抑郁测评专业版') {
    const res = await getDepressionTopics()
    console.log(res)
    questions.value = res.data
  }
  else if (name.value === '男性功能测评') {
    const res = await getPrematureTopics()
    console.log(res)
    questions.value = res.data
  }
  else if (name.value === '失眠程度测评') {
    const res = await getInsomniaTopics()
    console.log(res)
    questions.value = res.data
  }
})
</script>

<template>
  <view class="view">
    <view class="view-header">
      <view class="view-header-tip">测评进度</view>
      <progress class="view-header-progress" activeColor="#488cef" active active-mode="forwards" :percent="percent" stroke-width="8" border-radius="4" />
      <view class="view-header-text" v-if="questions.length > 0">{{ activeIndex + 1 + '/' + questions.length }}</view>
    </view>
    <template v-for="(item, index) in questions" :key="index">
      <view class="view-question" v-if="activeIndex === index">{{ item.topic }}</view>
      <view class="view-answers" v-if="activeIndex === index">
        <view class="view-answers-tip">单选题</view>
        <view class="view-answer" @click="handleAnswer(option, index + 1)" v-for="(option, optionIndex) in item.options" :key="optionIndex" hover-class="hover">{{ option.title }}</view>
      </view>
    </template>
  </view>
</template>

<style scoped lang="scss">
.view {
  min-height: 100vh;
  background: linear-gradient(to bottom, #d6e8ff, #fff);
  .view-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx;
    font-size: 28rpx;
    .view-header-progress {
      flex: 1;
      margin: 0 40rpx;
    }
  }
  .view-question {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 8rpx;
    font-size: 28rpx;
  }
  .view-answers {
    margin: 20rpx;
    padding: 20rpx;
    background-color: #f7fbff;
    border-radius: 8rpx;
    font-size: 28rpx;
    .view-answers-tip {
      position: relative;
      padding-left: 20rpx;
      margin-bottom: 20rpx;
      &::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 8rpx;
        height: 28rpx;
        background-color: #488cef;
      }
    }
    .view-answer {
      margin-bottom: 20rpx;
      padding: 30rpx 10rpx;
      background-color: #fff;
      border-radius: 8rpx;
    }
    .hover {
      background-color: #488cef;
      color: #fff;
    }
  }
}
</style>
